<template>
  <div class="hot-jobs">
    <div class="hot-jobs-top">
      <span class="hot-jobs-label">热门职位:</span>
      <button
        v-for="job in hotJobs"
        :key="job"
        @click="setSearchQuery(job)"
        class="hot-job-button"
      >
        {{ job }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// const jobType = ref('')
const searchQuery = ref('')

const hotJobs = [
  'AI',
  'PHP',
  'Java',
  'python',
  '人工智能',
  '测试工程师',
  '运维工程师',
  '网络工程师',
  'IT技术支持',
  '数据分析师'
]

// const handleSearch = () => {
//   console.log('Searching for:', searchQuery.value, 'Job Type:', jobType.value)
//   // Implement search logic here
// }

const setSearchQuery = (job) => {
  searchQuery.value = job
}
</script>
<style scoped>
.hot-jobs {
  display: flex;
  margin-bottom: 1.5rem;
}
.hot-jobs-top {
  /* margin-top: 10px; */
  margin: 0 auto;
  flex-wrap: wrap;
  align-items: center;
}

.hot-jobs-label {
  color: #999;
  margin-right: 10px;
  font-size: 14px;
}

.hot-job-button {
  background: none;
  border: none;
  color: #6a9fd4;
  margin-right: 10px;
  margin-bottom: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.hot-job-button:hover {
  color: #007ffe;
}
</style>
